<template>
  <div class="main">
    <NavBar
      :title="product.title"
      left-text="返回"
      fixed="true"
      placeholder="true"
      left-arrow
      @click-left="onClickLeft"
    ></NavBar>
    <div class="detail">
      <img class="daimg" :src="product.imgs" alt="" />
      <h1 style="text-align: center">{{ product.name }}</h1>
      <div class="lay">
        <p>综合评价指数：<rate v-model="value" readonly /></p>
        <p>
          <span style="font-size: 1vw"
            >1670条评价 人均: 127元　环境: 9.1　服务: 9.0
            {{ product.price }}/人</span
          >
        </p>

        <p>地址：{{ product.address }}</p>
        <p>电话：0371-5643** 2183875492**</p>
        <p>特色：几个地方了</p>
        <p>好评数量：{{ product.score }}</p>
        <p>营业时间：{{ product.openingHours }}</p>
      </div>
      <div class="pingjia">
        <h3>网友评价</h3>

        <ul>
          <li v-for="item in comments">
            <card
              desc="校服的毛阿敏"
              thumb="http://img.wxcha.com/m00/f0/f5/5e3999ad5a8d62188ac5ba8ca32e058f.jpg"
            >
              <template #tags>
                <p>评分：6.5</p>
                <p>{{ item.title }}</p>
                <p>
                  何苦热负荷功能哭然后涂可视化的伍尔夫好可怜商家服务二级分类登记覅热敷可点击
                </p>
                <img :src="item.imgs" alt="" />
                <img src="../../images/14.jpg" alt="" />
                <img src="../../images/14.jpg" alt="" />
                <p>评价时间：2022-10-03</p>
              </template>
            </card>
          </li>
        </ul>
        <h5 style="text-align: center; color: gray">没有更多了...</h5>
      </div>
    </div>
    <!-- <div class="content" v-html="product.content"></div> -->
    <action-bar>
      <action-bar-icon
        style="width: 80px"
        icon="chat-o"
        badge="2"
        text="客服"
      />
      <action-bar-icon
        style="width: 80px"
        id="kefu"
        icon="shop-o"
        text="店铺"
      />
      <action-bar-button
        color="#be99ff"
        type="warning"
        text="收藏"
        @click="souc"
      />
      <action-bar-button
        color="#7232dd"
        type="danger"
        :to="{ name: 'pay', query: { tid: tid } }"
        text="立即拼单"
      />
    </action-bar>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import {
  Toast,
  Icon,
  Rate,
  NavBar,
  ActionBar,
  ActionBarIcon,
  ActionBarButton,
  Card
} from 'vant'
import { setToken, getToken } from '../../utils/tools'
import router from '../../router'
import axios from 'axios'
const product = ref({})
const route = useRoute()
const value = ref(4)
const comments = ref([])
const tid = ref(route.query.tid)
const a = getToken()
// console.log(tid.value)
//根据商品id获取商品详情
axios({
  method: 'get',
  url: 'http://47.104.75.203:8080/api/shop/query/' + tid.value,
  headers: {
    Authorization: a
  }
}).then((res) => {
  console.log(res)
  console.log('详情')
  product.value = res.data.data
})

//获取评论
axios({
  method: 'get',
  url: 'http://47.104.75.203:8080/api/notes',
  headers: {
    Authorization: a
  }
}).then((res) => {
  console.log(res)
  console.log('评论')
  comments.value = res.data.data
  console.log(comments.value)
})

//返回上一页
const onClickLeft = () => {
  router.go(-1)
}
//收藏
const souc = () => {
  Toast('收藏成功！')
}
</script>
<style scoped>
.daimg {
  width: 90vw;
  height: 40vh;
  display: block;
  border-radius: 20px;
  margin: 8px auto;
}
.main {
  padding: 0 10px 100px 10px;
}

.xing img {
  width: 18px;
  height: 18px;
}
.lay p {
  height: 30px;
  padding-left: 20px;
}
</style>
